<template>
  <div class="m-content">
	  <!-- Row -->
	  <div class="simple-grid">
	      <!--Cell with given width. Replace 25% with whatever you want -->
	      <div class="simple-grid__cell simple-grid__cell--1/4">
			  <router-link :to="{path:'/blogs'}"><img class="mlogo" src="https://s1.ax1x.com/2022/07/08/jBD2n0.png" alt="jBD2n0.png" border="0" /></router-link>
		  </div>
	  
	      <!-- Cell that takes remaining width -->
	      <div class="simple-grid__cell simple-grid__cell--1/4">
			  <div class="maction">
			    <span><el-link @click="jump('/blogs')">主页</el-link></span>
			    <el-divider direction="vertical"></el-divider>
			    <span v-show="!hasLogin"><el-link type="primary" @click="jump('/login')">登录/注册</el-link></span>
			  			  
			    <span v-show="hasLogin">
					<el-dropdown>
					  <span class="el-dropdown-link">
					    <i class="el-icon-user" @click="jump('/user')"></i>
					    <!-- <el-avatar :size="30" :src="user.avatar"></el-avatar> -->
					    &nbsp;<el-link type="info">{{ user.username }}</el-link>
						<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
					  </span>
					    <el-dropdown-menu slot="dropdown">
					      <el-dropdown-item>
							  <el-link type="success" @click="jump('/user')">我的</el-link>
						  </el-dropdown-item> 
						  <el-dropdown-item>
						  	  <span><el-link type="success" @click="jump('/blog/add')">发表博客</el-link></span>				 
						  </el-dropdown-item> 
					      <el-dropdown-item divided>
							  <el-link type="danger" @click="logout()">注销登录</el-link>
						  </el-dropdown-item>
					    </el-dropdown-menu>
						</el-dropdown>
				</span>
			  </div>
		  </div>
	  </div>
	
  </div>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        user: {
          username: '请先登录',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          
        },
        hasLogin: false
      }
    },
    methods: {
		jump(pathurl){
			this.$router.push({path:pathurl})
		},
      logout() {
			// 退出测试
			sessionStorage.removeItem("userInfo")
			  this.$router.push("/")
			  console.log("退出成功");
	   
			const _this = this
			_this.$axios.get("/logout", {
			  headers: {
				"Authorization": localStorage.getItem("token")
			  }
			}).then(res => {
			  _this.$store.commit("REMOVE_INFO")
			  _this.$router.push("/login")
			})
			
			_this.$axios.get("/login/imgloginchange/1/0").then(res => {
				this.$router.go(0)
			})
      }
    },
    created() {
      if(this.$store.getters.getUser.username) {
        this.user.username = this.$store.getters.getUser.username
        this.user.avatar = this.$store.getters.getUser.avatar
        this.hasLogin = true
      }

    }
  }
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

  .m-content {
    max-width: 1000px;
    margin: 0 auto 30px;
    text-align: center;
	background-color: white; 
  }
  .maction {
    margin: 10px 0;
  }


.simple-grid {
    display: flex;
	justify-content: space-between;

    margin-left: -0.25rem;
    margin-right: -0.25rem;
}

.simple-grid__cell {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.simple-grid__cell--fill {
    flex: 1;
}

/* Cell with given width */
.simple-grid__cell--1\/2 {
    flex: 0 0 50%;
}
.simple-grid__cell--1\/3 {
    flex: 0 0 33.3333333%;
}
.simple-grid__cell--1\/4 {
    flex: 0 0 25%;
}
</style>